﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>员工通讯录</title>
    <!-- Bootstrap -->
    <link href="/CSS/bootstrap3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="/JqueryPlug/dtGrid/jquery.dtGrid.css" rel="stylesheet">
    <link href="/CSS/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/CSS/Base/BaseClass.css?cssver=4" rel="stylesheet">
    <script src="/Scripts/jquery-1.11.2.min.js"></script>
    <script src="/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <script src="/Scripts/avalon.js"></script>
    <script src="/Scripts/jquery-migrate-1.1.0.min.js"></script>
    <script src="/JqueryPlug/dtGrid/jquery.dtGrid.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
        var grid, dtoption;
        var model = avalon.define({
            $id: "YGGL",
            BranchData: [],
            BranchListData: [],
            pId: -1,
            SelDeptItem: {},
            GetUserList: function (item) {
                var deptCode = 1;
                if (item != null) {
                    deptCode = item.DeptCode;
                }
                $.getJSON('/API/SZHLAPI.ashx?Action=GETUSERBYCODE', { "P1": deptCode, P2: $("#tbSearch").val() }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        grid.originalDatas = resultData.Result
                        grid.load()
                        model.SelDeptItem = item == null ? {} : item;
                    }
                })
            }
            ,
            SetFrameHeight: function (framename) {
                var oFrm = document.getElementById(framename);
                oFrm.onload = oFrm.onreadystatechange = function () {
                    if (this.readyState && this.readyState != 'complete') return;
                    else {
                        var mainheight = $("#dvContent").height() - 45;
                        $("#" + framename).height(mainheight);
                        $("#mastmenu").height(mainheight);
                        $(window.frames[framename].document).find(".maindiv").css({ height: mainheight + "px", overflow: "auto" });
                    }
                }
            }
        });
        avalon.ready(function () {
            //获取主要菜单
            dtoption = {
                lang: 'zh-cn',
                check: true,
                ajaxLoad: false,
                exportFileName: '用户列表',
                columns: [
                    { id: 'UserRealName', title: '用户名', type: 'string', columnClass: 'text-center' },
                    { id: 'DeptName', title: '所在部门', type: 'string', columnClass: 'text-center' },
                    { id: 'mobphone', title: '手机号', type: 'string', columnClass: 'text-center' },
                    { id: 'zhiwu', title: '职务', type: 'string', columnClass: 'text-center' },
                    { id: 'mailbox', title: '邮箱', type: 'string', columnClass: 'text-center' }


                ],
                gridContainer: 'dtgrid',
                toolbarContainer: 'dtgridTool',
                pageSize: 10,
                pageSizeLimit: [10, 20, 50],
                tools: 'faseQuery',
                onGridComplete: function (grid) {
                    var log = '<p>表格加载完成。表格编号：' + grid.option.id + '。</p>';
                }
            };
            $.getJSON('/API/SZHLAPI.ashx?Action=GETBRANCH', { "P1": "1" }, function (resultData) {
                model.BranchData = resultData.Result;
                pId = model.BranchData[0].DeptCode;
                $.getJSON('/API/SZHLAPI.ashx?Action=GETUSERBYCODE', { "P1": 1 }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        dtoption.datas = resultData.Result;
                        grid = $.fn.DtGrid.init(dtoption);
                        grid.load()
                    }
                })
            })
        })
    </script>
</head>
<body ms-controller="YGGL">
    <div class="container-fluid maindiv" style="margin-top: 20px" id="dvContent">
        <div class="row">
            <div class="col-xs-3">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading"><a style="cursor:pointer" ms-click="GetUserList(null)">全部人员</a></div>
                    
                    <!-- List group -->
                    <ul class="list-group">
                        <li class="list-group-item" ms-repeat-item="BranchData" ms-class="active:item.DeptCode==SelDeptItem.DeptCode" ms-attr-id="item.DeptCode" ms-click="GetUserList(item)"><span class="badge">{{item.userCount}}</span><span>{{item.DeptName}}</span></li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-9 contentdv">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">{{SelDeptItem.DeptName?SelDeptItem.DeptName:"全部人员"}}</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-6 hidden">
                                <a href="#" id="btADD" style=" height: 34px;line-height: 34px;" class="button button-glow button-border button-rounded button-primary"><i class="fa fa-plus"></i>发送消息</a>
                            </div>
                            <div class="col-xs-6">
                                <div class="input-group">
                                    <div class="input-group-addon">搜索关键字</div>
                                    <input id="tbSearch" class="form-control" type="text" placeholder="姓名,部门,手机号..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-info" ms-click="GetUserList(SelDeptItem)">查询</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="dtgrid" style="margin-top:20px"></div>
                        <div id="dtgridTool" class="dt-grid-toolbar-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>